<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="gbk" />
		<title>Document</title>
		<link rel="stylesheet" href="../../third-party/mathquill/mathquill.css" />
		<style>
			html,
			body,
			.main {
				margin: 0;
				padding: 0;
				overflow: hidden;
			}
			.main {
				width: 1024px;
				height: 1024px;
			}
			.mathquill-editable,
			.mathquill-rendered-math {
				border: 0px;
				padding: 0px;
				margin: 4px;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="mathquill-editable"></div>
		</div>

		<div>
			<input id="blurHelper" />
		</div>

		<script src="../../third-party/jquery.min.js"></script>
		<script src="../../third-party/mathquill/mathquill.js"></script>
		<script>
			$(function () {
				var UM = parent.UM,
					$iframe = $(getSelfIframe()),
					editorId = $iframe.parents('.edui-body-container').attr('id'),
					editor = UM.getEditor(editorId),
					timer;

				/* ��õ�ǰ��ʽ���ڵ�iframe�ڵ� */
				function getSelfIframe() {
					var iframes = parent.document.getElementsByTagName('iframe');
					for (var key in iframes) {
						if (iframes[key].contentWindow == window) {
							return iframes[key];
						}
					}
					return null;
				}
				/* ��õ�ǰurl�ϵ�hash�洢�Ĳ���ֵ */
				function getLatex() {
					return $iframe.attr('data-latex') || '';
				}
				/* ���泡�� */
				function saveScene() {
					timer && clearTimeout(timer);
					timer = setTimeout(function () {
						editor.fireEvent('savescene');
						editor.fireEvent('contentchange');
						editor.fireEvent('selectionchange');
						timer = null;
					}, 300);
				}
				/* ���ñ༭���ɱ༭ */
				function enableEditor() {
					if (editor.body.contentEditable == 'false') {
						editor.setEnabled();
					}
				}
				/* ���ñ༭�����ɱ༭ */
				function disableEditor() {
					if (editor.body.contentEditable == 'true') {
						editor.setDisabled(['undo', 'redo', 'preview', 'formula'], true);
					}
				}

				/* ��ʽ */
				var Formula = function () {
					var _this = this,
						latex = getLatex();

					this.isFocus = false;
					this.isDisabled = false;

					/* ���ع�ʽ���� */
					this.$mathquill = $('.mathquill-editable').mathquill('latex', latex);

					/* ���û״̬�Ĺ�ʽiframe */
					this.$mathquill.on('mousedown', function () {
						/* �༭��������ʱ,��ʽҲ������ */
						if (_this.disabled) return false;

						/* ��һ�ε����ǰ��ʽ,���ù�ʽ� */
						if (!$iframe.hasClass('edui-formula-active')) {
							disableEditor();
							editor.blur();
							editor.$body
								.find('iframe')
								.not($iframe)
								.each(function (k, v) {
									v.contentWindow.formula.blur();
								});
							if (_this.$mathquill.find('.cursor').css('display') == 'none') {
								_this.refresh();
								_this.$mathquill.addClass('hasCursor');
							}
						}
						_this.focus();
					});
					editor.addListener('click', function () {
						_this.blur();
						enableEditor();
					});

					/* ����focus,�༭��Ҳ�ж�Ϊfocus */
					editor.addListener('isFocus', function () {
						return _this.isFocus;
					});
					/* um������,��ʽҲ���ɱ༭ */
					editor.addListener('setDisabled', function (type, except) {
						if (!(except && except.join(' ').indexOf('formula') != -1) && _this.isDisabled != true) {
							_this.setDisabled();
						}
					});
					editor.addListener('setEnabled', function () {
						if (_this.isDisabled != false) {
							_this.setEnabled();
						}
					});

					/* ���ø������iframe�Ĵ�С������ */
					$(document.body)
						.on('keydown', function () {
							_this.updateIframe();
						})
						.on('keyup', function () {
							_this.updateIframe();
						});

					/* �����ʼ���ĸ���״̬ */
					this.$mathquill.removeClass('hasCursor');

					/* ��ʼ�����ӳ�ˢ�����iframe��С */
					setTimeout(function () {
						_this.updateIframe();
					}, 300);
				};

				Formula.prototype = {
					focus: function () {
						$iframe.addClass('edui-formula-active');
						this.isFocus = true;
					},
					blur: function () {
						$iframe.removeClass('edui-formula-active');
						this.removeCursor();
						this.isFocus = false;
					},
					removeCursor: function () {
						this.$mathquill.find('span.cursor').hide();
						this.$mathquill.parent().find('.hasCursor').removeClass('hasCursor');
					},
					updateIframe: function () {
						$iframe.width(this.$mathquill.width() + 8).height(this.$mathquill.height() + 8);
						var latex = $iframe.attr('data-latex'),
							newLatex = this.getLatex();
						if (latex != newLatex) {
							$iframe.attr('data-latex', this.getLatex());
							saveScene();
						}
					},
					insertLatex: function (latex) {
						this.$mathquill.mathquill('write', latex);
						this.updateIframe();
						this.removeCursor();
					},
					setLatex: function (latex) {
						this.$mathquill.mathquill('latex', latex);
						this.updateIframe();
					},
					getLatex: function () {
						return this.$mathquill.mathquill('latex');
					},
					redraw: function () {
						this.$mathquill.mathquill('redraw');
					},
					setDisabled: function () {
						this.blur();
						var latex = this.getLatex();
						this.$mathquill.mathquill('revert').text(latex).mathquill();
						this.updateIframe();
						this.isDisabled = true;
					},
					setEnabled: function () {
						this.$mathquill.removeClass('mathquill-rendered-math');
						this.refresh();
						this.isDisabled = false;
					},
					refresh: function () {
						var latex = this.getLatex();
						this.$mathquill.mathquill('revert').text(latex).mathquill('editable');
						this.updateIframe();
					},
				};

				/* �󶨵�window�ϣ����ϼ�window���� */
				window.formula = new Formula();
			});
		</script>
	</body>
</html>
